<template>
  <a-card class="app-shortcut" :hoverable="true" title="常用功能">
    <a-row :gutter="20">
      <a-col v-for="(item, index) in shortcut" :key="index" :span="5">
        <div class="gutter-box">
          <icon :type="item.icon" />
          <span>{{ item.title }}</span>
        </div>
      </a-col>
    </a-row>
    <p class="app-shortcut-tips">
      功能上新：微商城上线打印方案模块，对接小票打印机（WiFi打印机和蓝牙打印机），多网点下也支持打印方案模块，减少漏单可能！
    </p>
  </a-card>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const shortcut = [
      {
        title: '微信',
        icon: 'WechatOutlined',
      },
      {
        title: '发布商品',
        icon: 'InboxOutlined',
      },
      {
        title: '发布商品',
        icon: 'InboxOutlined',
      },
      {
        title: '发布商品',
        icon: 'InboxOutlined',
      },
      {
        title: '发布商品',
        icon: 'InboxOutlined',
      },
      {
        title: '微信',
        icon: 'WechatOutlined',
      },
      {
        title: '发布商品',
        icon: 'InboxOutlined',
      },
      {
        title: '发布商品',
        icon: 'InboxOutlined',
      },
      {
        title: '发布商品',
        icon: 'InboxOutlined',
      },
      {
        title: '发布商品',
        icon: 'InboxOutlined',
      },
    ]

    return {
      shortcut,
    }
  },
})
</script>

<style lang="scss">
.app-shortcut {
  .ant-row {
    .ant-col {
      margin-bottom: 10px;
      .anticon {
        color: rgb(150, 5, 5);
        font-size: 20px;
        margin-right: 8px;
      }
    }
  }
  .gutter-box {
    padding: 20px;
    background-color: #f1f1f1;
    & > * {
      display: inline-block;
      vertical-align: top;
    }
  }
}
</style>
